<template>
  <!-- #ifdef XT_PC -->
  <el-dialog
    :title="title"
    :visible="show"
    :modal="false"
    :width="width"
    @close="$emit('close')"
  >
    <slot />
    <view 
      v-if="hasConfirm"
      slot="footer"
      class="x-flexp-row x-flex-jc-around x-flex-none"
    >
      <x-button 
        :custom-style="{width: '30vw'}"
        @click="$emit('close')"
      >
        {{ cancelText }}
      </x-button>
      <view class="x-pa" />
      <x-button
        type="primary"
        :custom-style="{width: '30vw'}"
        @click="$emit('confirm')"
      >
        {{ confirmText }}
      </x-button>
    </view>
  </el-dialog>
  <!-- #endif -->
  <!-- eslint-disable vue/no-multiple-template-root -->
  <!-- #ifndef XT_PC -->
  <u-popup
    :show="show"
    :round="10"
    mode="bottom"
    closeable
    @close="$emit('close')"
  >
    <slot />
    <view 
      v-if="hasConfirm" 
      class="x-bt x-pa x-flexp-row x-flex-jc-around x-flex-none"
    >
      <u-button 
        :custom-style="{width: '30vw'}"
        @click="$emit('close')"
      >
        {{ cancelText }}
      </u-button>
      <view class="x-pa" />
      <u-button
        type="primary"
        :custom-style="{width: '30vw'}"
        @click="$emit('confirm')"
      >
        {{ confirmText }}
      </u-button>
    </view>
  </u-popup>
  <!-- #endif -->
</template>

<script>
  export default {
    props: {
      size: {
        type: String,
        default: 'small'
      },
      title: {
        type: String,
        default: '请选择'
      },
      confirmText: {
        type: String,
        default: '确认'
      },
      cancelText: {
        type: String,
        default: '取消'
      },
      show: {
        type: Boolean,
        default: false
      },
      hasConfirm: {
        type: Boolean,
        default: false
      },
      width: {
        type: String,
        default: '80%'
      },
    },
    data() {
      return {
        
      }
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>

</style>
